<template>
  <div class="video-container" @mousedown="handleMouseDown">
    <!-- 视频容器 -->
    <div 
      class="video-wrapper"
      :style="{ transform: `translateY(-${currentIndex * 100}%)` }"
    >
      <div v-for="(video, index) in videos" :key="index" class="video-item">
        <video 
          ref="videoEls"
          :muted="index !== currentIndex"
          :autoplay="index === currentIndex"
          @timeupdate="handleTimeUpdate(index)"
        >
          <source :src="video.url" type="video/mp4">
          您的浏览器不支持视频播放
        </video>
        <div class="video-title">{{ video.title }}</div>
      </div>
    </div>

    <!-- 指示器 -->
    <div class="indicators">
      <div 
        v-for="(video, index) in videos" 
        :key="index" 
        class="indicator"
        :class="{ active: index === currentIndex }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      videos: [
        {
          url: 'https://demo.kodcloud.com/?explorer/share/file&hash=16a98qozYAGbzCZaSoPqnGKZrVsjqABK1DHeEYQoCFcpWNu0OTEekmUAnsbjhBuUE1NBpIlG&name=/%E5%A4%A7%E5%9C%A3%E5%BD%92%E6%9D%A5.mp4',
          title: '视频 1'
        },
        {
          url: 'https://demo.kodcloud.com/?explorer/share/file&hash=16a98qozYAGbzCZaSoPqnGKZrVsjqABK1DHeEYQoCFcpWNu0OTEekmUAnsbjhBuUE1NBpIlG&name=/%E5%A4%A7%E5%9C%A3%E5%BD%92%E6%9D%A5.mp4',
          title: '视频 2'
        },
        {
          url: 'https://demo.kodcloud.com/?explorer/share/file&hash=16a98qozYAGbzCZaSoPqnGKZrVsjqABK1DHeEYQoCFcpWNu0OTEekmUAnsbjhBuUE1NBpIlG&name=/%E5%A4%A7%E5%9C%A3%E5%BD%92%E6%9D%A5.mp4',
          title: '视频 3'
        }
      ],
      startY: 0,
      isDragging: false,
      timer: null
    }
  },
  mounted() {
    this.autoPlay();
  },
  methods: {
    handleMouseDown(e) {
      this.startY = e.clientY;
      this.isDragging = true;
      this.clearAutoPlay();

      // 动态添加监听器
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
    },
    handleMouseMove(e) {
      if (!this.isDragging) return;

      const currentY = e.clientY;
      const diff = this.startY - currentY;

      if (Math.abs(diff) > 50) { // 阈值控制
        if (diff > 0) {
          // 向上滑动（向下拖）
          this.currentIndex = Math.min(this.currentIndex + 1, this.videos.length - 1);
        } else {
          // 向下滑动（向上拖）
          this.currentIndex = Math.max(this.currentIndex - 1, 0);
        }
        this.isDragging = false;
      }
    },
    handleMouseUp() {
      this.isDragging = false;
      this.removeListeners();
      this.autoPlay();
    },
    removeListeners() {
      document.removeEventListener('mousemove', this.handleMouseMove);
      document.removeEventListener('mouseup', this.handleMouseUp);
    },
    autoPlay() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (!this.isDragging) {
          this.currentIndex = (this.currentIndex + 1) % this.videos.length;
        }
      }, 5000);
    },
    clearAutoPlay() {
      clearInterval(this.timer);
    },
    handleTimeUpdate(index) {
      const video = this.$refs.videoEls[index];
      if (video && video.ended) {
        this.currentIndex = (this.currentIndex + 1) % this.videos.length;
      }
    }
  },
  beforeDestroy() {
    this.clearAutoPlay();
    this.removeListeners();
  }
}
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: grab; /* 提示用户可以拖拽 */
}

.video-wrapper {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  transition: transform 0.3s ease-in-out;
}

.video-item {
  min-height: 100vh; /* 每个视频高度为 100% 视口高度 */
  position: relative;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-size: 24px;
  background: rgba(0,0,0,0.5);
  padding: 8px 16px;
  border-radius: 4px;
}

.indicators {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.indicator {
  width: 10px;
  height: 10px;
  margin: 8px 0;
  background-color: rgba(255,255,255,0.5);
  border-radius: 50%;
  transition: background-color 0.3s;
}

.indicator.active {
  background-color: white;
  width: 20px;
}
</style>